<template>
  <div>
    <el-container>
      <el-header height="60px">
        <el-row>
          <div style="margin: 0 160px">
            <el-col :span="6">
              <span>BUCTCODER</span>
            </el-col>
          </div>
          <el-col :span="3">
            <i class="el-icon-message"></i>
            <el-button type="text" @click="message">学生基本信息</el-button>
          </el-col>
          <el-col :span="3">
            <i class="el-icon-document"></i>
            <el-button type="text" @click="tongji">近期比赛统计</el-button>
          </el-col>
          <el-col :span="5">
            <i class="el-icon-data-line"></i>
            <el-button type="text" @click="rank">各类排行榜单</el-button>
          </el-col>
          <el-col :span="5">
            <el-button type="info" plain @click="denglu">登录</el-button>
            <el-button type="primary" @click="zhuce">注册</el-button>
          </el-col>
        </el-row>
      </el-header>

      <el-container style="height: 750px; border: 1px solid #eee">
        <el-aside style="width: 160px; background-color: #ffffff">
        </el-aside>
        <el-main>
          <el-dropdown>
            <span>切换榜单<i class="el-icon-arrow-down el-icon--right"></i></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <router-link to="/codeforcesrank2">codeforces积分</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/atcoderrank3">atcoder比赛数量</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/codeforcesrank3">codeforces比赛数量</router-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-table ref="multipleTable" :data="tableData" highlight-current-row  border tooltip-effect="dark" style="width: 100%">
            <el-table-column type="index" align="center" label="排名" width="80px" :index="indexMethod"></el-table-column>
            <el-table-column align="center" prop="stuid" label="学号"></el-table-column>
            <el-table-column align="center" prop="stuname" label="姓名"></el-table-column>
            <el-table-column align="center" prop="stuclass" label="班级"></el-table-column>
            <el-table-column align="center" prop="actopscore" label="atcoder积分"></el-table-column>
            <el-table-column align="center" prop="cftopscore" label="codeforces积分"></el-table-column>
            <el-table-column align="center" prop="accontestcount" label="atcoder比赛数量"></el-table-column>
            <el-table-column align="center" prop="cfcontestcount" label="codeforces比赛数量"></el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="prev, pager, next,  sizes, total, jumper"
              :total="total"
          ></el-pagination>
        </el-main>
        <el-aside style="width: 160px; background-color: #ffffff">
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  name: "atcoderrank2",
  data() {
    return {
      tableData: [],
      pageNum: 1,//当前加载的page
      pageSize: 10,//当前的limit
      total: 0//后台返回的总页数
    };
  },
  created(){
    this.initTable()//页面初始加载
  },
  methods: {
    indexMethod(index){
      return (this.pageNum-1)*this.pageSize+index+1;
    },
    message(){
      this.$router.push("/homepage")
    },
    tongji(){
      this.$router.push("/recent2")
    },
    rank(){
      this.$router.push("/atcoderrank2")
    },
    denglu(){
      this.$router.push("/")
    },
    zhuce(){
      this.$router.push("/register")
    },
    handleCurrentChange(val) {
      this.pageNum = val; //val可以获取当前用户选择的页码数
      this.initTable()
    },
    //每页显示的条数大小改变时触发的方法
    handleSizeChange(val) {
      this.pageSize = val;//获取用户想要每页显示的条数
      this.initTable();
    },
    initTable() {
      this.$axios.post("/common/rank", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        type: "actopscore"
      })
          .then(response => {
            this.tableData = response.data.data.list;
            this.total = response.data.data.total;
          })
    }
  }
}
</script>